<template>
    <div>
    <div class="banner shell" v-on:mouseover="stop()" v-on:mouseout="move()">
<!--                @before-enter="beforeEnter"-->
<!--                @enter="enter"-->
<!--                @after-enter="afterEnter"-->
        <!--        v-show="cur === index"-->
<!--        :key="index" name="fade" v-for="(item, index) in imgData"-->
<!--        v-for="(item, index) in imgData"-->

<!--        <transition >-->
<!--&lt;!&ndash;            v-if="index===cur"&ndash;&gt;-->
<!--            <div-->
<!--                  v-for="(item, index) in imgData"-->
<!--                 :key="index">-->
<!--                <img v-show="cur === index" class="banner-img" :src="item"/>-->

<!--            </div>-->

<!--            &lt;!&ndash; <img  :src="imgData[index]"/> &ndash;&gt;-->
<!--        </transition>-->

<!--        <transition name="fade" v-for="(item, index) in imgData"-->
<!--                     :key="index">-->
<!--            &lt;!&ndash;            为啥只有最后一个切换到第一个的时候 会有渐变啊 &ndash;&gt;-->
<!--            &lt;!&ndash;            v-if="index===cur"&ndash;&gt;-->
<!--            &lt;!&ndash;            <div&ndash;&gt;-->
<!--            &lt;!&ndash;                  v-for="(item, index) in imgData"&ndash;&gt;-->
<!--            &lt;!&ndash;                 :key="index">&ndash;&gt;-->
<!--            <div-->
<!--            >-->
<!--                <img v-show="cur === index" class="banner-img" :src="item"/>-->

<!--            </div>-->

<!--            &lt;!&ndash; <img  :src="imgData[index]"/> &ndash;&gt;-->
<!--        </transition>-->

<!--        <transition name="fade" >-->
<!--        &lt;!&ndash;            为啥只有最后一个切换到第一个的时候 会有渐变啊 &ndash;&gt;-->
<!--        &lt;!&ndash;            v-if="index===cur"&ndash;&gt;-->
<!--        &lt;!&ndash;            <div&ndash;&gt;-->
<!--        &lt;!&ndash;                  v-for="(item, index) in imgData"&ndash;&gt;-->
<!--        &lt;!&ndash;                 :key="index">&ndash;&gt;-->
<!--        <div v-for="(item, index) in imgData" v-if="index===cur"-->
<!--             :key="index"-->
<!--        >-->
<!--            <img v-show="cur === index" class="banner-img" :src="item"/>-->

<!--        </div>-->

<!--        &lt;!&ndash; <img  :src="imgData[index]"/> &ndash;&gt;-->
<!--    </transition>-->

<!--        <transition name="fade" >-->
<!--            &lt;!&ndash;            为啥只有最后一个切换到第一个的时候 会有渐变啊 &ndash;&gt;-->
<!--            &lt;!&ndash;            v-if="index===cur"&ndash;&gt;-->
<!--            &lt;!&ndash;            <div&ndash;&gt;-->
<!--            &lt;!&ndash;                  v-for="(item, index) in imgData"&ndash;&gt;-->
<!--            &lt;!&ndash;                 :key="index">&ndash;&gt;-->
<!--            <div v-for="(item, index) in imgData"-->
<!--                 :key="index"-->
<!--            >-->
<!--                <img v-show="cur === index" class="banner-img" :src="item"/>-->

<!--            </div>-->

<!--            &lt;!&ndash; <img  :src="imgData[index]"/> &ndash;&gt;-->
<!--        </transition>-->

<!--        <transition name="fade" v-for="(item, index) in imgData"-->
<!--                    :key="index">-->
<!--            &lt;!&ndash;            为啥只有最后一个切换到第一个的时候 会有渐变啊 &ndash;&gt;-->
<!--            &lt;!&ndash;            v-if="index===cur"&ndash;&gt;-->
<!--            &lt;!&ndash;            <div&ndash;&gt;-->
<!--            &lt;!&ndash;                  v-for="(item, index) in imgData"&ndash;&gt;-->
<!--            &lt;!&ndash;                 :key="index">&ndash;&gt;-->
<!--            <div-->
<!--            >-->
<!--                <img v-show="cur === index" class="banner-img" :src="item"/>-->

<!--            </div>-->

<!--            &lt;!&ndash; <img  :src="imgData[index]"/> &ndash;&gt;-->
<!--        </transition>-->

<!--        <transition name="fade">-->
<!--            &lt;!&ndash; mark 现在是第几张 &ndash;&gt;-->
<!--            <div-->
<!--                    class="imgs"-->
<!--                    v-for="(item, index) in banner"-->
<!--                    v-if="index === cur"-->
<!--                    :key="index"-->

<!--            >-->
<!--                &lt;!&ndash; <img v-if="item.picUrl" class="img1" :src="item.picUrl"/>-->
<!--                <img v-if="item.picUrl2"  class="img2 a" :src="item.picUrl2"/>-->
<!--                <img v-if="item.picUrl3"  class="img3 b" :src="item.picUrl3"/> &ndash;&gt;-->

<!--                <img v-show="item" class="banner-img" :src="item" />-->
<!--                <img v-show="item" class="banner-img" :src="banner[cur]" />-->
<!--                &lt;!&ndash; 他们是两张图重合在一起的吗 &ndash;&gt;-->
<!--                &lt;!&ndash; <img v-show="item.picUrl2"  class="img2 a" :src="item.picUrl2"/> &ndash;&gt;-->
<!--                &lt;!&ndash; <img v-show="item.picUrl3"  class="img3 b" :src="item.picUrl3"/> &ndash;&gt;-->
<!--            </div>-->
<!--        </transition>-->

<!--        <transition name="fade"   v-for="(item, index) in imgData"  :key="index"-->
<!--                   >-->
<!--            &lt;!&ndash; mark 现在是第几张 &ndash;&gt;-->
<!--            <div-->
<!--                    class="imgs"-->

<!--            >-->
<!--                &lt;!&ndash; <img v-if="item.picUrl" class="img1" :src="item.picUrl"/>-->
<!--                <img v-if="item.picUrl2"  class="img2 a" :src="item.picUrl2"/>-->
<!--                <img v-if="item.picUrl3"  class="img3 b" :src="item.picUrl3"/> &ndash;&gt;-->
<!--&lt;!&ndash;                v-show="item"&ndash;&gt;-->
<!--                <img class="banner-img" :src="item" />-->
<!--&lt;!&ndash;                <img v-show="item" class="banner-img" :src="banner[cur]" />&ndash;&gt;-->
<!--                &lt;!&ndash; 他们是两张图重合在一起的吗 &ndash;&gt;-->
<!--                &lt;!&ndash; <img v-show="item.picUrl2"  class="img2 a" :src="item.picUrl2"/> &ndash;&gt;-->
<!--                &lt;!&ndash; <img v-show="item.picUrl3"  class="img3 b" :src="item.picUrl3"/> &ndash;&gt;-->
<!--            </div>-->
<!--        </transition>-->

<!--        https://www.jianshu.com/p/dad645bcb3da-->
<!--        <transition  appear name="fade" v-for="(item, index) in imgData"-->
<!--                     :key="index">-->
<!--            &lt;!&ndash;            为啥只有最后一个切换到第一个的时候 会有渐变啊 &ndash;&gt;-->
<!--            &lt;!&ndash;            v-if="index===cur"&ndash;&gt;-->
<!--            &lt;!&ndash;            <div&ndash;&gt;-->
<!--            &lt;!&ndash;                  v-for="(item, index) in imgData"&ndash;&gt;-->
<!--            &lt;!&ndash;                 :key="index">&ndash;&gt;-->
<!--            <div-->
<!--            >-->
<!--                <img v-show="cur === index" class="banner-img" :src="item"/>-->

<!--            </div>-->

<!--            &lt;!&ndash; <img  :src="imgData[index]"/> &ndash;&gt;-->
<!--        </transition>-->
<!--        <div   v-for="(item, index) in imgData"-->
<!--              :key="index">-->
<!--            <transition  enter-from-class="fade-enter-active" appear  name="fade">-->
<!--                &lt;!&ndash;            为啥只有最后一个切换到第一个的时候 会有渐变啊 &ndash;&gt;-->
<!--                &lt;!&ndash;            v-if="index===cur"&ndash;&gt;-->
<!--                &lt;!&ndash;            <div&ndash;&gt;-->
<!--                &lt;!&ndash;                  v-for="(item, index) in imgData"&ndash;&gt;-->
<!--                &lt;!&ndash;                 :key="index">&ndash;&gt;-->
<!--                <div-->
<!--                >-->
<!--                    <img v-show="cur === index" class="banner-img" :src="item"/>-->

<!--                </div>-->

<!--                &lt;!&ndash; <img  :src="imgData[index]"/> &ndash;&gt;-->
<!--            </transition>-->
<!--        </div>-->

<!--        <div   :style="{ left:index*-100 + '%'}" v-for="(item, index) in imgData"-->
<!--               :key="index">-->
<!--            <transition  enter-from-class="fade-enter-active" appear  name="fade">-->
<!--                &lt;!&ndash;            为啥只有最后一个切换到第一个的时候 会有渐变啊 &ndash;&gt;-->
<!--                &lt;!&ndash;            v-if="index===cur"&ndash;&gt;-->
<!--                &lt;!&ndash;            <div&ndash;&gt;-->
<!--                &lt;!&ndash;                  v-for="(item, index) in imgData"&ndash;&gt;-->
<!--                &lt;!&ndash;                 :key="index">&ndash;&gt;-->
<!--                <div-->
<!--                >-->
<!--                    <img v-show="cur === index" class="banner-img" :src="item"/>-->

<!--                </div>-->

<!--                &lt;!&ndash; <img  :src="imgData[index]"/> &ndash;&gt;-->
<!--            </transition>-->

<!--        </div>-->

<!--        <img  :src="item" :style="{ left:index*-100 + '%'}" v-for="(item, index) in imgData"-->
<!--               :key="index">  </img>-->
        <div class="images-wrapper">
        <ul class="images" :style="{ left:cur*-100 + '%'}">
            <li class="img" v-for="(item, index) in imgData" :key="index" :style="{backgroundImage:item}"></li>
        </ul>
        </div>

<!--        <ul class="min-images">-->
<!--            <li v-for="(item, index) in imgData" :key="index" :style="{backgroundImage:item}" :class="index === item.id ? 'active':'min'" ></li>-->
<!--        </ul>-->

        <!--        transition vue3 无效-->
<!--        <transition name="fade">-->
<!--            &lt;!&ndash; mark 现在是第几张 &ndash;&gt;-->
<!--            <div-->
<!--                    class="imgs"-->

<!--            >-->
<!--                &lt;!&ndash; <img v-if="item.picUrl" class="img1" :src="item.picUrl"/>-->
<!--                <img v-if="item.picUrl2"  class="img2 a" :src="item.picUrl2"/>-->
<!--                <img v-if="item.picUrl3"  class="img3 b" :src="item.picUrl3"/> &ndash;&gt;-->

<!--&lt;!&ndash;                <img v-show="item" class="banner-img" :src="item" />&ndash;&gt;-->
<!--                <img  class="banner-img" :src="banner[cur]" />-->
<!--                &lt;!&ndash; 他们是两张图重合在一起的吗 &ndash;&gt;-->
<!--                &lt;!&ndash; <img v-show="item.picUrl2"  class="img2 a" :src="item.picUrl2"/> &ndash;&gt;-->
<!--                &lt;!&ndash; <img v-show="item.picUrl3"  class="img3 b" :src="item.picUrl3"/> &ndash;&gt;-->
<!--            </div>-->
<!--        </transition>-->

        <!--    :class="{active-img: index == cur }"-->
        <!--    :class="{active: index === cur?'active-img':'' }"-->
        <!-- https://cn.vuejs.org/v2/guide/class-and-style.html -->
        <!--        <img-->
        <!--                :class="{'active-img': index === cur,'fade-in-img': index !== cur}"-->

        <!--                v-for="(item, index) in imgData"-->
        <!--                :key="index"-->
        <!--                :src="item"-->
        <!--                v-show="cur === index"-->
        <!--        />-->

<!--        <div class="banner-circle">-->
<!--            <ul class="carouselNumber">-->
<!--                <li-->
<!--                        v-for="(item, index) in imgData"-->
<!--                        :key="index"-->
<!--                        :class="{ active: index == cur }"-->
<!--                >-->
<!--                    {{ index }}-->
<!--                </li>-->G
<!--            </ul>-->
<!--        </div>-->

    </div>

        <div class="transition-group-box">
    <transition-group
            name = "slip"
            class="transition-group-box"
    >
        <!--            v-for="(item, index) in imgData"-->
        <img
                class="img-item"
                v-for="(item, index) in imgSrcData"
                :key="index"
                :src="item"
                v-show="cur === index"
        />
    </transition-group>
        </div>
    <!-- ————————————————
    版权声明：本文为CSDN博主「肥鸽子咕咕咕」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
    原文链接：https://blog.csdn.net/qq_54074936/article/details/124040327 -->

    </div>
</template>

<script>
import {reactive, toRefs, inject, onMounted} from 'vue'

export default {
  setup () {
    const state = reactive({
      // 拿到
      imgData: inject('imgData'),
      cur: 0, // 初始化值
      timer: null,
      isShow: false,
      // imgSrcData: inject('imgData')
      imgSrcData: []
    })

    const makeImgData = () => {
      // state.imgData.forEach(o => {
      //   o = 'url(' + require(o) + ')'
      // })
      // state.imgSrcData.slice(state.imgData)
      // state.imgSrcData = state.imgData.slice(0)
      console.log('state.imgData')
      console.log(state.imgData)
      for (let imgDataKey in state.imgData) {
        // state.imgSrcData.push(state.imgData[imgDataKey].clone())
        state.imgSrcData.push(state.imgData[imgDataKey])
        // state.imgData[imgDataKey] = 'url(' + require(state.imgData[imgDataKey]) + ')'
        state.imgData[imgDataKey] = 'url(' + state.imgData[imgDataKey] + ')'
        // state.imgSrcData[]
      }
      // 这是引用吗
      console.log('imgSrcData')
      console.log(state.imgSrcData)
    }
    const beforeEnter = (el) => {
      console.log(el)
      state.isShow = false
      // el.style.transform = "translate(50px,50px)";
      el.style.transform = 'translate(0px,0px)'
      //   el.style.transform = "translate(50px,0px)";
    }
    const enter = (el, done) => {
      // el.offsetWidth
      console.log('el.offsetWidth')
      console.log(el.offsetWidth)
      //   el.style.transform = "translate(150px,450px)";
      el.style.transform = 'translate(150px,0px)'
      // https://developer.mozilla.org/zh-CN/docs/Web/CSS/translate
      // 往右边移动 进去的时候
      el.style.transition = 'all 1s ease'
      done()
    }
    // 结束就是没了
    // const afterEnter = () => (state.isShow = false);
    const afterEnter = (el) => {
      console.log('el')
      console.log(el)
      state.isShow = false
      el.style.transform = 'translate(0px,0px)'
      el.style.transition = 'all 1s ease'
    }
    // vue class 改变的时候 动画变
    // 组件里一个 动画 每次 移动 一个个 移出去 移动进来
    const autoplay = () => {
      state.cur++
      state.cur = state.cur % state.imgData.length
    }
    const play = () => {
      //    let  intervalMs=100
      // let intervalMs = 1000;
      // let intervalMs = 900;
      // let intervalMs = 1100;
      let intervalMs = 2000
      // let  intervalMs=2000

      state.timer = setInterval(autoplay, intervalMs)
    }
    const stop = () => {
      clearInterval(state.timer)
    }
    const move = () => {
      play()
    }
    onMounted(() => {
      console.log('imgData')
      console.log(state.imgData)
      makeImgData()
      play()
    })
    const fadeInOut = () => {
      state.isShow = !state.isShow
    }

    return {
      ...toRefs(state),
      play,
      stop,
      move,
      beforeEnter,
      enter,
      afterEnter,
      fadeInOut
    }
  }
}
</script>

<style scoped>
    /*.transition-group-box{*/
    /*    !*这是个虚的东西 他的margin 没有用处*!*/
    /*    background: #48ff52;*/
    /*    width: 400px;*/
    /*    height: 400px;*/
    /*    margin-top: 500px;*/
    /*}*/

    .transition-group-box {
        /*background: #48ff52;*/
        /*width: 400px;*/
        /*height: 400px;*/
        /*margin-top: 500px;*/
        margin-top: 20px;
    }
    .img-item{
        /*margin-top: 600px;*/
        /*width: 200px;*/
        /*height: 200px;*/
        width: 900px;
        height: 500px;

    }

.slip-enter-active{
    animation:flip1 0.5s linear
}
.slip-leave-active{
    animation:flip2 0.5s linear
}

@keyframes flip1{
    0%{
        transform: translateX(400px);
        opacity: 0;
    }
    50%{
        transform: translateX(200px);
        opacity: 0.5;
    }
    100%{
        transform:translateX(0px);
        opacity:1;
    }
}
@keyframes flip2{
    0%{
        transform: translateX(0px);
        opacity:1
    }
    50%{
        transform: translateX(-200px);
        opacity: 0.5;
    }
    100%{
        transform:translateX(-400px);
        opacity:0
    }
}
/* ————————————————
版权声明：本文为CSDN博主「肥鸽子咕咕咕」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_54074936/article/details/124040327 */

    * {
        padding: 0px;
        margin: 0px;
        list-style: none;
        bottom: 0;
        text-decoration: none;
    }

    .shell {
        width: 900px;
        /*width: 675px;*/
        height: 500px;
        position: relative;
        overflow: hidden;
        border-radius: 5px;
        border: 10px #fff solid;
        box-shadow: 20px 30px 20px rgba(0, 0, 0, 0.5);
    }

    .min-images {
        display: flex;
        /* 可以使每个元素之间和元素距离边距的距离都相等 */
        justify-content: space-evenly;
        position: absolute;
        bottom: 20px;
        width: 40%;
        z-index: 999;
        right: 10%;
    }

    .min {
        width: 60px;
        height: 60px;
        cursor: pointer;
        border-radius: 50%;
        background-size: cover;
        border: 5px solid rgba(255, 255, 255, 0.5);
        /* 设置图片的起始位置 */
        background-position: -20px 0;
    }

    .active {
        width: 60px;
        height: 60px;
        cursor: pointer;
        border-radius: 50%;
        background-size: cover;
        border: 5px solid rgba(160, 193, 255, 0.7);
        /* 设置图片的起始位置 */
        background-position: -20px 0;
    }

    .images {
        /*position: relative;*/
        /*width: 300%;*/
        /*width: 100%;*/
        width: 400%;
        /*几张图就是 几00% */
        /*因为他需要把四张图片都放进来*/
        height: 100%;
        display: flex;
        position: absolute;
        /*不是abs 就不动了 */
        left: 0;
        /* 所有的属性都变化 */
        transition: 0.2s;
    }

    .img {
        width: 100%;
        background-size: cover;
    }

    .banner-img {
        display: block;
        position: absolute;
        /*width: 100%;*/
        /*height: 100%;*/
        top: 0;
        border-radius: 10px;
    }

    .fade-enter-active,
    .fade-leave-active {
        /*transition: opacity 0.5s;*/
        transition: opacity 1s;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }

    .active-img {
        /* 从一个类变成另外一个类 会有变化效果吗 */
        /* v-show  过度动画 */
        /* transform: translate(150px,0); */
        /* transform: translate(150px, 20px); */
        /* transform: translate(150px, 0px); */
        /* transform 透明度 */
        /* transition: all 1s ease; */
        -webkit-transition: all 1.5s;
        -moz-transition: all 1.5s;
        -ms-transition: all 1.5s;
        -o-transition: all 1.5s;
        transition: all 1.5s;
        opacity: 0;
        /* 这是某一帧 */
    }

    .carouselNumber {
        list-style: none;
        display: flex;
        position: absolute;
        right: 200px;
        /*bottom: 200px;*/
        bottom: 20px;
        /*left: 300px;*/
        /*top: 300px;*/
    }

    .carouselNumber li {
        margin-left: 10px;
        height: 20px;
        width: 20px;
        background-color: white;
        color: salmon;
        border: 1px solid salmon;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
    }

    .carouselNumber li.active {
        color: white;
        background-color: salmon;
        /* transform: translate(150px,450px);
          transition: all 1s ease; */
    }

    .fade-in-img {
        -webkit-transition: all 1.5s;
        -moz-transition: all 1.5s;
        -ms-transition: all 1.5s;
        -o-transition: all 1.5s;
        transition: all 1.5s;
        opacity: 1;
    }
    /*.images-wrapper{*/
    /*    position: relative;*/
    /*}*/
</style>
